<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BookAdmin-热门书籍</title>
    <link rel="icon" href="/images/favicon.ico" type="image/ico">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15" style="height: 100%">
    <div class="row" style="height: 100%">
        <div class="col-md-4" style="height: 100%">
            <div class="card" style="height: 50%">
                <div style="height: 100%"  class="card-body" id="chart-book">
                </div>
            </div>
        </div>
        <div class="col-md-4" style="height: 100%">
            <div class="card" style="height: 50%">
                <div style="height: 100%" class="card-body" id="chart-reader">
                </div>
            </div>
        </div>
        <div class="col-md-4" style="height: 100%">
            <div class="card" style="height: 50%">
                <div style="height: 100%" class="card-body" id="chart-borrower">
                </div>
            </div>
        </div>
    </div>
</div>




</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let bookChart = echarts.init(document.getElementById('chart-book'));
    let readerChart = echarts.init(document.getElementById('chart-reader'));
    let borrowerChart = echarts.init(document.getElementById('chart-borrower'));

    $.get('/report/hotBook', function(resp) {
        if (resp.flag) {
            let option = {
                title: {
                    text: '热门书籍',
                    subtext: '本月被借阅次数最多的前5本书',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: resp.data.bookNames
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: resp.data.bookDatas,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            bookChart.setOption(option);
        }
    });

    $.get('/report/newReader', function(resp) {
        if (resp.flag) {
            let option = {
                title: {
                    text: '近三个月新增读者'
                },
                xAxis: {
                    type: 'category',
                    data: resp.data.months
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: resp.data.counts,
                    type: 'line'
                }],
                color: '#d48265'
            };
            readerChart.setOption(option);
        }
    });

    $.get('/report/mostBorrower', function(resp) {
        if (resp.flag) {
            let option = {
                title: {
                    text: '本月借阅次数最多的前5名读者',
                },
                xAxis: {
                    type: 'category',
                    name: '姓名',
                    data: resp.data.borrowerNames
                },
                yAxis: {
                    type: 'value',
                    name: '借阅次数'
                },
                series: [{
                    data: resp.data.borrowCounts,
                    type: 'bar'
                }]
            };

            borrowerChart.setOption(option);
        }
    });

</script>
</html>